<template>
  <div class="dialog-main">
    <el-dialog
      v-if="showAddPosition"
      v-model="dialogVisible"
      width="50%"
      top="10vh"
      :before-close="handleClose"
      :show-close="false"
      draggable
    >
      <el-form
        :model="form"
        label-position="left"
        status-icon
        :rules="rules"
        class="add-form"
        ref="ruleFormRef"
      >
        <el-form-item label="岗位名称" prop="roleName">
          <el-input v-model="form.roleName" />
        </el-form-item>
        <el-form-item label="所属部门" prop="department_name">
          <el-select v-model="form.department_name" @change="handleNodeClick" placeholder="请选择">
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.department_name"
              :value="item.department_name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <footer class="footer">
        <el-button @click="handleClose" class="btn button">关闭</el-button>
        <el-button class="btn" color="#6C52EA" @click="handleSavePositon">保存</el-button>
      </footer>
    </el-dialog>
    <el-dialog
      v-else
      v-model="dialogVisible"
      width="50%"
      top="10vh"
      :before-close="handleClose"
      :show-close="false"
      draggable
    >
      <el-form
        :model="form"
        label-position="left"
        status-icon
        :rules="rules"
        class="add-form"
        ref="ruleFormRef"
      >
        <el-form-item label="部门名称" prop="department_name">
          <el-input v-model="form.department_name" />
        </el-form-item>
        <el-form-item label="部门状态" prop="is_status">
          <el-select v-model="form.is_status" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="handleClose" class="btn button">关闭</el-button>
        <el-button class="btn" color="#6C52EA" @click="handleSaveDepartment">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, reactive } from 'vue'
import { ElMessage, FormRules } from 'element-plus'
import { getDepartmentList, newDepartmentData } from '@/apis/organization/department'
// import { newPageData } from '@/apis/system/department'
// import { getDepartmentList } from '@/apis/system/department'

const props = defineProps({
  dialog: {
    type: Boolean,
    default: false
  },
  showAddPosition: {
    type: Boolean,
    default: false
  }
})

watch(
  () => [props.dialog, props.showAddPosition],
  (newVal) => {
    ;(dialogVisible.value = newVal[0]), (showAddPosition.value = newVal[1])
    if (showAddPosition.value === true) {
      getData()
    }
  }
)

const form = reactive({
  departmentName: '',
  roleName: '', // 职位
  is_status: '',
  parent_id: 0, //父级id
  parent_name: '',
  department_name: ''
})

const statusOptions = ref([
  { label: '正常', value: '正常' },
  { label: '待启用', value: '待启用' }
])

const rules = reactive<FormRules>({
  roleName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
  department_name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
  is_status: [{ required: true, message: '部门状态不能为空', trigger: 'blur' }]
})
const emit = defineEmits(['dialogClose', 'dialogSave'])

/**
 * 获取下拉部门名称
 */
let dataList = ref()
const getData = () => {
  getDepartmentList().then((res) => {
    if (!res) return
    dataList.value = res
  })
}

/**
 * 关闭弹窗
 */
const ruleFormRef = ref()
const dialogVisible = ref()
const showAddPosition = ref()
const handleClose = () => {
  ruleFormRef.value.resetFields()
  dialogVisible.value = false
  emit('dialogClose')
}

/**
 * 部门创建保存
 */
const handleSaveDepartment = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      let pageData = {
        department_name: form.department_name,
        is_status: form.is_status
      }
      newDepartmentData(pageData)
        .then((res) => {
          if (!res) return
          emit('dialogSave')
          ruleFormRef.value.resetFields()
          ElMessage.success('创建成功')
        })
        .catch(() => {
          ElMessage('服务器内部错误！')
        })
    }
  })
}

/**
 * 获取下拉父级id
 */
interface dataList {
  department_name: string
}
const handleNodeClick = (departmentName: string) => {
  let arr = dataList.value.filter((item: dataList) => {
    return item.department_name === departmentName
  })
  form.parent_id = arr[0]?.id
  form.parent_name = departmentName
}

/**
 * 岗位创建保存
 */
const handleSavePositon = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      let params = {
        parent_name: form.parent_name,
        parent_id: form.parent_id,
        department_name: form.roleName, //岗位名称
        is_status: form.is_status //岗位名称
      }
      newDepartmentData(params)
        .then((res) => {
          if (!res) return
          emit('dialogSave')
          ruleFormRef.value.resetFields()
          ElMessage.success('创建成功')
        })
        .catch(() => {
          ElMessage('服务器内部错误！')
        })
    }
  })
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
  border-radius: 10px;
}
:deep(.el-input) {
  width: 90%;
}
:deep(.el-textarea__inner) {
  width: 90%;
}
.button {
  color: #6C52EA;
}
.button:hover {
  color: #6C52EA;
  border-color: #6C52EA;
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
  opacity:0.8;
}
.dialog-main {
  .add-form {
    height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 15%;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(220, 223, 230, 1);
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding-top: 10px;
    text-align: right;
    .btn {
      width: 150px;
      height: 48px;
      opacity: 1;
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 15px 61px 15px 61px;
    }
  }
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
